<template>
	<view class="tasklist-container">
		<van-tabs @change="changeTab" color="#1152FC" animated :lazy-render="false" :active="active">
			<van-tab :title-style="active == 0 ? 'color: #1152FC' : ''" :title="`未开始(${nostartLength})`">
				<task-list v-if="nostartList.length" :taskList="nostartList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="nostartList.length >= 10" :status="status" />
			</van-tab>
			<van-tab :title-style="active == 1 ? 'color: #1152FC' : ''" :title="`进行中(${handleLength})`">
				<task-list v-if="handleList.length" :taskList="handleList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="handleList.length >= 10" :status="status1" />
			</van-tab>
			<van-tab :title-style="active == 2 ? 'color: #1152FC' : ''" :title="`已超时(${overTimeLength})`">
				<task-list v-if="overTimeList.length" :taskList="overTimeList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="overTimeList.length >= 10" :status="status2" />
			</van-tab>
			<van-tab :title-style="active == 3 ? 'color: #1152FC' : ''" :title="`正常完成(${completeLength})`">
				<task-list v-if="completeList.length" :taskList="completeList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="completeList.length >= 10" :status="status3" />
			</van-tab>
			<van-tab :title-style="active == 4 ? 'color: #1152FC' : ''" :title="`超时完成(${overCompleteLength})`">
				<task-list v-if="overCompleteList.length" :taskList="overCompleteList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="overCompleteList.length >= 10" :status="status4" />
			</van-tab>
			<van-tab :title-style="active == 5 ? 'color: #1152FC' : ''" :title="`已废弃(${abandonLength})`">
				<task-list v-if="abandonList.length" :taskList="abandonList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="abandonList.length >= 10" :status="status5" />
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import TaskList from '@/components/taskList.vue'
	export default {
		components: {
			TaskList
		},
		props: {
			status: {
				type: String
			},
			status1: {
				type: String
			},
			status2: {
				type: String
			},
			status3: {
				type: String
			},
			status4: {
				type: String
			},
			status5: {
				type: String
			},
			overTimeList: {
				type: Array,
				default: () => []
			},
			handleList: {
				type: Array,
				default: () => []
			},
			completeList: {
				type: Array,
				default: () => []
			},
			abandonList: {
				type: Array,
				default: () => []
			},
			nostartList: {
				type: Array,
				default: () => []
			} ,
			overCompleteList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				active: 0
			}
		},
		onLoad() {
			// this.getTaskList()
		},
		computed: {
			nostartLength() {
				return this.nostartList.length || 0
			},
			handleLength() {
				return this.handleList.length || 0
			},
			overTimeLength() {
				return this.overTimeList.length || 0
			},
			completeLength() {
				return this.completeList.length || 0
			},
			overCompleteLength() {
				return this.overCompleteList.length || 0
			},
			abandonLength() {
				return this.abandonList.length || 0
			}
		},
		methods: {
			changeTab(name) {
				this.active = name.target.index
			}
		}
	}
</script>

<style lang="scss">
	.tasklist-container {
		background-color: #f5f5f5;
	}

	.van-empty {
		background-color: #fff;
	}

	.van-ellipsis {
		flex-basis: 25% !important;
	}
	.search {
		// margin-left: 100rpx;
		width: 750rpx;
		height: 96rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		.s-arrow {
			width: 16rpx;
			height: 16rpx;
			border-top: 2rpx solid #3699FF;
			border-right: 2rpx solid #3699FF;
			transform: rotate(135deg);
			margin-left: 10rpx;
			margin-top: -4rpx;
		}
		.search-box {
			width: 440rpx;
			height: 56rpx;
			margin-left: 20rpx;
			padding-left: 17rpx;
			padding-right: 20rpx;
			// background-color: pink;
			border: 2rpx solid #595959;
			border-radius: 28rpx;
			display: flex;
			.icon {
				width: 50rpx;
				height: 46rpx;
				margin-top: 3rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
			.search-input {
				flex: 1;
				height: 100%;
				color: #999;
			}
			.pop {
				position: absolute;
				right: 60rpx;
			}
		}
	}
</style>
